<template>
	<view class="shop-details">
		<!-- 顶部服务站图片和名称 -->
		<view class="top-banner">
			<image class="banner-img" src="/static/vehicle_repair/storeDetails/banner.png" mode="widthFix"></image>
		</view>

		<!-- 服务站基本信息 -->
		<view class="shop-info">
			<text class="factory-name">大美汽车服务站(莲花街店)</text>
			<view class="rating">
				<uni-rate size="20" v-model="rate" :readonly="true" />
				<text class="score">{{rate}} 分</text>
				<text class="review-count">销量: {{count}}</text>
			</view>
			<view class="business-hour">营业时间: {{businessHour}}</view>
			<view class="shop-item">
				<view class="location">位置: {{location}}</view>
				<image class="plane" src="/static/vehicle_repair/storeDetails/plane.png" mode="widthFix" @click="gotoStore"></image>
			</view>

		</view>

		<!-- 服务项目 -->
		<view class="service-section">
			<text class="section-title">服务项目</text>
			<view class="service-item" v-for="(service,index) in services" :key="index">
				<text class="service-name">{{service.name}}</text>
				<view class="price">
					<text class="current-price">￥ {{service.currentPrice}}</text>
					<text class="original-price">￥ {{service.originalPrice}}</text>
				</view>
			</view>
		</view>

		<!-- 服务评价 -->
		<view class="review-section">
			<text class="section-title">服务评价</text>
			<view class="review-item" v-for="(review,index) in reviews" :key="index">
				<view class="review-header">
					<image class="avatar" src="/static/vehicle_repair/storeDetails/avatar.png" mode="widthFix"></image>
					<text class="reviewer">{{review.reviewer}}</text>
					<text class="review-date">{{review.date}}</text>
				</view>
				<view class="stars">
					<uni-rate size="20" v-model="review.stars" :readonly="true" />
				</view>
				<text class="review-content">{{review.content}}</text>
			</view>
		</view>

		<button class="booking-btn" @click="booking">立即预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate: 4,
				count: 556,
				businessHour: '周一至周日 早上8:00-晚上22:00',
				location: '中原区莲花街与雪松路交叉口',
				services: [{
						name: "工时价格（每小时）",
						currentPrice: 35.9,
						originalPrice: 60
					},
					{
						name: "轮胎",
						currentPrice: 35.9,
						originalPrice: 60
					},
					{
						name: "洗车",
						currentPrice: 35.9,
						originalPrice: 60
					},
				],
				reviews: [{
						reviewer: "黄**",
						date: "2022-12-31",
						stars: 4,
						content: "洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！",
					},
					{
						reviewer: "黄**",
						date: "2022-12-31",
						stars: 5,
						content: "洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！",
					},
					{
						reviewer: "黄**",
						date: "2022-12-31",
						stars: 3.5,
						content: "洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！",
					},
					{
						reviewer: "黄**",
						date: "2022-12-31",
						stars: 4.5,
						content: "洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！",
					},
				],
			}
		},
		methods: {
			booking() {
				uni.navigateTo({
					url: "/index-item/vehicle_repair/bookingRepair/bookingRepair"
				})
			},
			gotoStore(){
				uni.navigateTo({
					url:'/index-item/vehicle_repair/nagivation/nagivation',
				})
			}
			
		}
	}
</script>

<style>
	.shop-details {
		padding: 30rpx;
		border-radius: 16rpx;
		background-color: #f5f5f5;
		position: relative;
		min-height: 100vh;
	}

	/* 页面背景色区域 - 顶部蓝色区域 */
	.shop-details::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 350rpx; /* 蓝色区域高度 */
		background-color: #3184FD;
		z-index: 0; /* 在页面内容下方 */
	}

	.top-banner {
		margin-top: -20rpx; /* 负边距让图片向上移动，靠近导航栏 */
		position: relative;
		z-index: 1; /* 确保在蓝色背景上方 */
		padding: 20rpx; /* 添加内边距作为白色外边距 */
		background-color: #fff; /* 白色背景 */
		border-radius: 20rpx; /* 圆角 */
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.banner-img {
		width: 100%; /* 图片占满容器 */
		border-radius: 20rpx; /* 添加圆角 */
		z-index: 1;
	}

	.shop-info {
		margin-bottom: 40rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff; /* 添加白色背景 */
		padding: 30rpx; /* 添加内边距 */
		position: relative;
		z-index: 1; /* 确保在蓝色背景上方 */
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); /* 添加阴影 */
	}

	.factory-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		display: block;
	}

	.rating {
		margin-bottom: 16rpx;
		display: flex;
		align-items: left;
		gap: 16rpx;
	}

	.review-count,
	.score {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

.shop-item{
	display: flex;
	align-items: center;
	gap: 20rpx;
}
	.location,
	.business-hour {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.plane {
		width: 30rpx;
		height: 30rpx;
	}

	.service-section {
		margin-bottom: 40rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff; /* 添加白色背景 */
		padding: 30rpx; /* 添加内边距 */
		position: relative;
		z-index: 1; /* 确保在蓝色背景上方 */
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); /* 添加阴影 */
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx 0 20rpx 0;
		padding-bottom: 10rpx;
		border: 2rpx solid #eee;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
	}

	.service-name {
		font-size: 28rpx;
	}

	.price {
		display: flex;
		align-items: center;
	}

	.current-price {
		color: #FF4408;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.original-price {
		clear: #999;
		font-size: 24rpx;
		text-decoration: line-through;
	}

	.review-section {
		margin-bottom: 40rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background-color: #fff; /* 添加白色背景 */
		padding: 30rpx; /* 添加内边距 */
		position: relative;
		z-index: 1; /* 确保在蓝色背景上方 */
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); /* 添加阴影 */
	}

	.review-item {
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #eee;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.reviewer {
		font-size: 28rpx;
		font-weight: bold;
	}

	.review-date {
		font-size: 24rpx;
		color: #999;
		margin-left: auto;
	}

	.review-content {
		font-size: 28rpx;
		line-height: 1.5;
	}

	.booking-btn {
		width: 100%;
		background: #3184FD;
		font-size: 32rpx;
		line-height: 88rpx;
		border-radius: 20rpx;
		color: #fff;
		border: none;
		position: relative;
		z-index: 1; /* 确保在蓝色背景上方 */
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); /* 添加阴影 */
	}
</style>